<template>
    <div class="page-container">
        <!-- Header 文案 + 日期筛选 -->
        <div class="header">
            <h2 class="title">抖音项目分析</h2>

            <div class="search-area">
                <!-- ✅ 使用共享日期组件 -->
                <DateRangeSelector
                        @update="handleDateParams"
                        @search="search"
                />
            </div>
        </div>

        <!-- 卡片区域 -->
        <div class="card-grid">
            <div
                    v-for="item in cards"
                    :key="item.id"
                    class="data-card"
                    :style="isMobile ? {} : { flex: item.size }"
            >
                <div class="card-title">{{ item.title }}</div>
                <div class="card-value">{{ item.value }}</div>
            </div>
        </div>


        <!-- 折线图部分 -->
        <div>
            <TrendLineChart
                    title="抖音整体趋势"
                    :mock="true"
                    @search="handleSearch"
            />

        </div>


        <!-- ✅ 店铺看板列表 -->
        <div class="store-list">
            <StoreDashboard
                    v-for="store in stores"
                    :key="store.id"
                    :store-name="store.name"
            />
        </div>


    </div>
</template>

<script setup>
    import {ref, computed, onMounted, watch } from "vue";
    import dayjs from "dayjs"
    // ✅ 引入公共组件
    import DateRangeSelector from "../components/DouyinProjectAnalysis/DateRangeSelector.vue"
    import TrendLineChart from "../components/DouyinProjectAnalysis/TrendLineChart.vue"
    import StoreDashboard from "../components/DouyinProjectAnalysis/StoreDashboard.vue" // ✅ 引入店铺组件
    const isMobile = computed(() => window.innerWidth <= 768);

    // 接收日期筛选参数
    const dateParams = ref({})
    // 共享组件回调
    const handleDateParams = (params) => {
        dateParams.value = params
    }

    // 模拟卡片数据
    const cards = ref([
        { id: 1, title: "支付金额", value: "22.25万元", size: 1 },
        { id: 2, title: "退款金额", value: "22.25万元", size: 1 },
        { id: 3, title: "签收率", value: "22.25%", size: 0.5 },
        { id: 4, title: "千川消耗", value: "22.25万元", size: 1 },
        { id: 5, title: "ROI", value: "22.25", size: 0.5 },
        { id: 6, title: "人工成本", value: "22.25万元", size: 1 },
        { id: 7, title: "业务利润", value: "22.25万元", size: 1 },
        { id: 8, title: "利润率", value: "22.25%", size: 0.5 },
    ])

    // 搜索执行函数
    const search = () => {
        const {
            type,
            dateRange,
            startDate,
            endDate,
            monthRange,
            startMonth,
            endMonth
        } = dateParams.value

        console.log("接收到的筛选参数: ", dateParams.value)

        let star_parm = ""
        let end_parm = ""

        if (type === "date") {
            const start = startDate || dateRange?.[0]
            const end = endDate || dateRange?.[1]
            if (!start || !end) {
                console.warn("请选择日期范围！")
                return
            }
            star_parm = dayjs(start).format("YYYY-MM-DD")
            end_parm = dayjs(end).format("YYYY-MM-DD")
        } else {
            const start = startMonth || monthRange?.[0]
            const end = endMonth || monthRange?.[1]
            if (!start || !end) {
                console.warn("请选择月份范围！")
                return
            }
            star_parm = dayjs(start).format("YYYY-MM")
            end_parm = dayjs(end).format("YYYY-MM")
        }

        console.log("最终提交给后端的参数: ", {
            date_or_month: type,
            star_parm,
            end_parm
        })
    }


    function handleSearch() {
        // 可在这里请求后端接口，更新趋势数据
    }




    // 模拟店铺数据
    const stores = ref([
        { id: 1, name: "ROOKIE官方旗舰店" },
        { id: 2, name: "海参优选旗舰店" },
        { id: 3, name: "臻品堂直营店" },
        { id: 4, name: "深海臻味旗舰店" }
    ])


    onMounted(() => {



    })











</script>

<style scoped>
    .store-list {
        display: flex;
        flex-direction: column;
        gap: 40px; /* ✅ 每个店铺间距 */
        margin-top: 50px;
    }



    .page-container {
        width: 90%;
        max-width: 1800px; /* 桌面端居中显示 */
        margin: 0 auto;
        padding: 16px;
        box-sizing: border-box;
    }

    /* Header */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px; /* 更舒适间距 */
    }

    .title {
        font-size: 26px;
        font-weight: bold;
    }

    .search-area {
        display: flex;
        gap: 14px;
        align-items: center;
    }

    /* 卡片网格布局 */
    .card-grid {

        display: flex;
        width: 100%;
        gap: 18px;
        overflow-x: auto;
        justify-content: space-between;
    }

    .data-card {
        background: #f6f8ff;
        border: 1px solid #bcd3ff;
        border-radius: 10px;
        padding: 12px 16px; /* ✅左对齐且有内边距 */
        box-shadow: 0 2px 6px rgba(140, 160, 255, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: 0.25s;
        min-height: 110px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Hover 间距变化体验更高级 */
    .data-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(100, 140, 255, 0.25);
    }

    .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 16px;
        text-align: left;
    }

    .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        text-align: left;
    }










    /* 手机适配 */
    @media (max-width: 768px) {

        .page-container {
            max-width: 85%;
            padding: 12px;
        }

        /* 表单按钮全宽 */
        .search-area {
            flex-direction: column;
            width: 100%;
        }


        /* 卡片栅格：单列 */
        .card-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .data-card {
            width: 100%;
            box-sizing: border-box;
        }

        .header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }


        /*.data-card {*/
        /*    flex: 1 1 calc(50% - 18px);*/
        /*}*/

        .data-card {
            padding: 14px 18px;
        }

        .card-title {
            font-size: 15px;
        }

        .card-value {
            font-size: 22px;
        }


    }

    @media (max-width: 480px) {
        .card-grid {
            /*grid-template-columns: repeat(1, 1fr);*/
            flex: 1 1 100%;
        }
    }
</style>
